<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/login.css">
    <title>登录</title>
</head>
<body>
    <div class="headerwrap">
        <div class="header">
            <img src="../images/zhongjiuloginlog.png" alt="" width="295px">
            <h2>欢迎登录</h2>
        </div>
    </div>
    <div class="banner">
        <img src="../images/loginBannerImg.png" alt="">
        <div class="wrap">
            <div class="wr-header">
                <ul>
                    <li>扫码登录</li>
                    <li>账户登录</li>
                </ul>
            </div>
            <div class="wr-content">
                <!-- 扫码登录部分内容 -->
                <div class="con1">
                    <img style="border: 1px solid #f1f1f1;" src="../images/loginapp.gif" alt=""width="159px">
                    <p>
                        <span>打开中酒网App</span>
                        <span>扫描二维码</span>
                    </p>
                    <img src="../images/sao_2.png" alt="">
                </div>
                <!-- 账户登录部分内容 -->
                <div class="con2">
                    <!-- 提示信息 -->
                    <div class="msg">
                        <!-- 用户名为空 -->
                        <p class="um">请输入用户名</p>
                        <!-- 密码为空 -->
                        <p class="pm">请输入密码</p>
                        <!-- 不匹配 -->
                        <p class="notm">用户名与密码不匹配</p>
                    </div>
                    <form action="">
                        <div class="user">
                            <span><img src="../images/icon-user.png" alt=""></span>
                            <input type="text" id="username" placeholder="请输入用户名">
                        </div>
                        <div class="password">
                            <span><img src="../images/icon-lock.png" alt=""></span>
                            <input type="password" name="" id="usermi" placeholder="请输入密码">
                        </div>
                        <input type="button" id="loginbtn" value="登录">
                        <p><a href="">短信验证码登录</a><a href="">忘记密码</a></p>
                    </form>

                </div>

            </div>
            <div class="wr-footer">
                <ul>
                    <li><span><img src="../images/icon-weibo.png" alt=""></span><a href="">微博</a></li>
                    <li><span><img src="../images/icon-weixin.png" alt=""></span><a href="">微信</a></li>
                    <li><a href="">立即注册</a></li>
                </ul>
            </div>
        </div>
    </div>
    <script src="../js/jquery-1.11.3.js"></script>
    
    <script>
      
        // 切换登录方式
        $(".wr-header ul li").eq(0).click(function(){
            $(this).css("color","red").siblings().css("color","black");
            $(".con1").show().siblings().hide();
        })
        $(".wr-header ul li").eq(1).click(function(){
            $(this).css("color","red").siblings().css("color","black");
            $(".con2").show().siblings().hide();
        })
        //  点击登录的验证事件
        $("#loginbtn").click(function(){
            flag = false;
            console.log("ok");
            // 用户名为空
            if($(".user input").val()==""){
                $(".msg").show();
                $(".msg p").eq(0).show().siblings().hide();
                return;
            }
            // 密码为空
            if($(".password input").val()==""){
                $(".msg").show();
                $(".msg p").eq(1).show().siblings().hide();
                return;
            }
            // 不匹配
            // 小更改
            let val1 =  $("#username").val();
            let val2 = $("#usermi").val();
            $.ajax({

                    // 在json-server生成的接口
                    url:"http://localhost:3000/user",
                    type:"get",
                    success:function(data){
                        console.log(data);
                        // 遍历数据中的手机号 
                        for(let i = 0;i < data.length;i++){
                            var dataphone = data[i]["phone"];
                            var datapass = data[i]["password"];
                            // 验证是否匹配
                            if(val1 == dataphone && val2==datapass){
                                flag = true; 
                                window.open("../index.html");
                            }
                        }if(flag==false){
                            $(".msg").show();
                            $(".msg p").eq(2).show().siblings().hide();      
                        }
                    }
            })
        })
        

    </script>
</body>
</html>